{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>车辆监控</title>
    <link rel="stylesheet" href="{% static 'css/base.css' %}">
    <link href="{% static 'css/zTreeStyle/zTreeStyle.css' %}" rel="stylesheet" type="text/css" />
</head>
<style>
    .magin_left {
        margin-left: 10px;
    }
    .magin_top {
        margin-top: 10px;
    }
</style>
<body style="position: absolute;width: 100%;height:760px">

<!--内容部分-->
<div class="con1 left" id="car_control" style="height: 700px">
    <div class="left car_left">
        <div class="left_up bow_shadow">
            <p>
                <input type="text" placeholder="输入工厂列表号" class="carNo_input"><input type="button" class="find_but"/>
            </p>
            <p class="set_list"><i class="list_i"></i> 工厂列表：</p>
            <p><ul id="treeDemo" class="ztree"></ul></p>
        </div>
        <div class="left_down bow_shadow">
            <div class="text_center">
                <a href="javascript:void(0)" class="tab_a tab_aActive">基本信息</a>
                <a href="javascript:void(0)" class="tab_a">远程控制</a>
            </div>
            <div class="car_content">
                <p><span>设备列表号：</span><span>001</span></p>
                <p><span>所属位置：</span><span>深圳南山区</span></p>
                <p><span>设备品牌：</span><span>华为</span></p>
                <p><span>设备型号：</span><span>AiPro</span></p>
                <p><span>所属工厂：</span><span>深圳123工厂</span></p>
                <p><span>工作时长：</span><span>12h</span></p>
                <p><span>状态：</span><span>在线</span></p>
            </div>
        </div>
    </div>
    <div class="left car_center" style="width: 690px; height: 574px;">
        <!-- 图片布局 -->
        <div style="position: relative; display: inline-block; text-align: center;">
            <img id="image1" src="{% static 'img/latest_images/anomaly1.jpg' %}?{{ timestamp }}" alt="Anomaly Image 1" style="width: 330px; height: 270px;">
            <p style="position: absolute; top: 0; left: 50%; transform: translateX(-50%); color: black; font-size: 20px;">device1 异常图像</p>
        </div>
        <div style="position: relative; display: inline-block; text-align: center;">
            <img id="image2" src="{% static 'img/latest_images/original1.jpg' %}?{{ timestamp }}" alt="Original Image 1" style="width: 330px; height: 270px; margin-left: 10px;">
            <p style="position: absolute; top: 0; left: 50%; transform: translateX(-50%); color: black; font-size: 20px;">device1 原始图像</p>
        </div>
        <div style="position: relative; display: inline-block; margin-top: 10px; text-align: center;">
            <img id="image3" src="{% static 'img/latest_images/anomaly2.jpg' %}?{{ timestamp }}" alt="Anomaly Image 2" style="width: 330px; height: 270px;">
            <p style="position: absolute; top: 0; left: 50%; transform: translateX(-50%); color: black; font-size: 20px;">device2 异常图像</p>
        </div>
        <div style="position: relative; display: inline-block; margin-left: 10px; margin-top: 10px; text-align: center;">
            <img id="image4" src="{% static 'img/latest_images/original2.jpg' %}?{{ timestamp }}" alt="Original Image 2" style="width: 330px; height: 270px;">
            <p style="position: absolute; top: 0; left: 50%; transform: translateX(-50%); color: black; font-size: 20px;">device2 原始图像</p>
        </div>
    </div>  
    <div class="right car_right" id="map"></div>
</div>

<script src="{% static 'js/jquery.js' %}"></script>
<script src="{% static 'js/echarts/echarts-all.js' %}"></script>
<script src="{% static 'js/base.js' %}"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=5ieMMexWmzB9jivTq6oCRX9j&callback"></script>
<script src="{% static 'js/car_control.js' %}"></script>
<script src="{% static 'js/ztree/jquery.ztree.all-3.5.js' %}"></script>
<script src="{% static 'js/listTree.js' %}"></script>

<script>
    // 每张图片的独立更新时间
    function updateImage1() {
        document.getElementById('image1').src = `{% static 'img/latest_images/anomaly1.jpg' %}?${new Date().getTime()}`;
    }
    function updateImage2() {
        document.getElementById('image2').src = `{% static 'img/latest_images/original1.jpg' %}?${new Date().getTime()}`;
    }
    function updateImage3() {
        document.getElementById('image3').src = `{% static 'img/latest_images/anomaly2.jpg' %}?${new Date().getTime()}`;
    }
    function updateImage4() {
        document.getElementById('image4').src = `{% static 'img/latest_images/original2.jpg' %}?${new Date().getTime()}`;
    }
    
    // 设置图片刷新间隔
    setInterval(updateImage1, 3000); // 每5秒更新第1张图片
    setInterval(updateImage2, 3000); // 每6秒更新第2张图片
    setInterval(updateImage3, 3000); // 每7秒更新第3张图片
    setInterval(updateImage4, 3000); // 每8秒更新第4张图片
</script>



<script>
    let wss_url = "ws://192.168.90.1:8168";  // 替换成你的服务器 IP 和端口
    let ws = new WebSocket(wss_url);

    ws.onopen = function(evt) {
        console.log(">>> ws.onopen.");
    };

    ws.onmessage = function(evt) {
        var base64 = evt.data;
        $("#video1").attr("src", base64);
        $("#video2").attr("src", base64);
        $("#video3").attr("src", base64);
        $("#video4").attr("src", base64);
    };

    ws.onclose = function(evt) {
        console.log(">>> ws.onclose.");
    };
</script>

</body>
</html>
